Encontré este fragmento de código aleatorio que crea una barra de progreso con un comportamiento asíncrono y me gustaría saber por qué se usó aquí la API web de cloneNode. Desde el documento mdn, básicamente clona el nodo y crea exactamente el mismo nodo con atributos e identificación. Pero me gustaría saber por qué se tuvo que clonedProgress , que es la versión cloneNode de progressBar , para crear una barra de progreso en este código. ¿Por qué la variable progressBar no funciona? https://codesandbox.io/s/immutable-browser-46gtcd?file=/src/index.js
let btn = document.querySelector("button"); let progressBar = document.querySelector(".progress"); let promise = Promise.resolve(); btn.addEventListener("click", () => { let clonedProgress = progressBar.cloneNode(true); clonedProgress.style.display = "block"; promise = promise.then( () => new Promise((resolve) => { setTimeout(() => { clonedProgress.querySelector(".bar").classList.add("loading"); setTimeout(() => { resolve(); }, 2000); }, 0); }) ); document.body.appendChild(clonedProgress); }); .progress { height: 20px; border: 1px solid; width: 500px; margin: 20px 0; background-color: grey; border-radius: 5px; } .bar { width: 0px; height: 100%; background-color: red; transition: width 2s ease-in 0s; } .loading { width: 100%; } <div id="app"></div> <button id="addBtn">add+</button> <div class="progress" style="display: none;"> <div class="bar"></div> </div>